<template>
    <el-container>
        <el-main>
            <div class="banner">
                <p>
                    Dr. Wu is a Principal investigator at Center for Precision Medicine Multi-Omics Research, Health
                    Science Center, Peking University. Dr. Wu obtained his undergraduate training in life science from
                    Beijing Normal University, Beijing, China, and his PhD in Bioinfromatics from Institute of Genetics
                    and Developmental Biology, Chinese Academy of Sciences, Beijing, China. Afterwards, he served as a
                    Research Fellow, Research Associate, and Research Scientist at Department of Data Science,
                    Dana-Farber Cancer Institute, Boston, USA. 
                </p>
                <p>
                    We focus on biostatistical and machine
                    learning algorithms for multi-omics data analysis and integration, as well as guide their
                    applications in studying human development, aging, and diseases. Our research activities revolve
                    around the following main areas:
                    <ol>
                        <li> 3D genome modeling to study gene epigenetic regulation and non-coding variance impact.</li>
                        <li> Machine learning algorithms and applications for single-cell multi-omics and spatial omics data
                            analysis.</li>
                        <li> Multi-omics integration algorithms to predict key regulatory factors in various cellular
                            processes.</li>
                    </ol>
                </p>
            </div>
            <div class="research">
                <h1 style="font-weight: 800; font-family: 'Open Sans';">Research interests</h1>
                <div class="research-item">
                    <h2 style="font-weight: 800; font-family: 'Open Sans';">Single-cell 3D genome data software and algorithm development</h2>
                    <div class="research-item-cotent">
                        <img src="/static/imgs/Research_4.png" />
                        <p>
                            Single-cell 3D genome data software and algorithm development is crucial for understanding
                            the spatial organization of the genome within individual cells. This technology allows
                            researchers to map the three-dimensional structure of the genome at a single-cell
                            resolution, providing insights into how the genome's spatial configuration influences gene
                            regulation, cellular function, and differentiation. By developing advanced software and
                            algorithms, scientists can process and analyze complex 3D genome data more efficiently and
                            accurately, leading to discoveries in areas such as developmental biology, disease
                            mechanisms, and personalized medicine.
                        </p>
                    </div>
                </div>
                <div class="research-item">
                    <h2 style="font-weight: 800; font-family: 'Open Sans';">Modeling 3D genome organization and its control of gene expression in stem
                        cell differentiation
                        and cancer progression</h2>
                    <div class="research-item-cotent">
                        <img src="/static/imgs/Research_2.png" />
                        <p>
                            Mammalian genomes are organized into a hierarchy of local structures including topologically
                            associating domains (TADs) and DNA loops. Disrupting the boundaries of such structures can
                            lead to novel chromosomal interactions and ectopic long-range enhancer adoption, which
                            interrupts key gene function. By using Hi-C, ChIA-PET and ChIP-seq data, we are able to
                            precisely model the local structure of human genome and its impact in gene regulation. By
                            using CRISPR screen with custom designed sgRNA library targeting the boundaries of such
                            local structure, we could interrogate the mechanism of controlling gene expression through
                            3D genome organization.
                        </p>
                    </div>
                </div>
            </div>

            <div class="news">
                <el-carousel width="100%" height="240px" :interval=5000>
                    <el-carousel-item v-for="item in carouselItems" :key="item">
                        <div class="news-item">
                            <div class="news-title">
                                <h2 style="display: block; font-weight: 800; font-family:'Open Sans'" text="2xl">News </h2>
                                <h2>{{ item.fields.year }} {{ item.fields.month }}</h2>
                            </div>
                            <div class="news-container">
                                <div class="news-content">
                                    <div v-if="item.fields.url">
                                        <h3 style="font-size: 23px; font-weight: 800; font-family:'Open Sans'">{{ item.fields.title }}</h3>
                                        <a :href="item.fields.url" target="_blank">
                                            <el-text line-clamp="2" class="news-text">
                                                {{ item.fields.content }}
                                            </el-text>
                                        </a>
                                    </div>
                                    <div v-else>
                                        <h3 style="font-size: 23px;">{{ item.fields.title }}</h3>
                                        <el-text line-clamp="2" class="news-text" style="color: black;">
                                            {{ item.fields.content }}
                                        </el-text>
                                    </div>
                                </div>
                                <div class="news-button">
                                    <el-button size="large" text :bg="true" :dark="true">
                                        <RouterLink to="/news">View More</RouterLink>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
    import { onBeforeMount, ref } from 'vue';
    import { get, post } from '../../axios/api';
    import { ElMessage, rowProps } from 'element-plus'

    let loading = ref(false)
    let carouselItems: any = ref([])
    const baseUrl = import.meta.env.VITE_MEDIA_URL

    function sortedMonths(a: any, b: any) {
        const customOrder = ["December", "November", "October", "September", "August", "July", "June", "May", "April", "March", "February", "January"];
        return customOrder.indexOf(a) - customOrder.indexOf(b)
    }



    async function getData() {
        let res: any = {}
        loading.value = true
        try {
            res = await post('/get_news/',)
            if (res && res.success) {
                carouselItems.value = res.origin_data.sort((a: any, b: any) => {
                    if (a.fields.year != b.fields.year) {
                        return b.fields.year - a.fields.year
                    }
                    return sortedMonths(a.fields.month, b.fields.month)
                }).slice(0, 5)
                loading.value = false
            } else {
                loading.value = false
                ElMessage({
                    message: res.msg || 'An error occured',
                    type: 'error',
                })
            }
        } catch (error: any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }


    onBeforeMount(() => {
        getData()
    })

</script>

<style lang="scss" scoped>
    .banner {
        font-family: Arial, sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 22px;
        line-height: 40px;
        background-color: #F5F5F5;
        padding: 50px 50px;
    }

    .banner p {
        font-size: 22px;
        line-height: 1.5;
    }



    .news {
        width: 100%;
        height: 250px;
        /* display: flex; */

        .news-item {
            margin-left: 2%;
            margin-right: 2%;

            .news-title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
            }

            .news-container {
                width: 100%;
                height: 150px;
                display: flex;
                justify-content: space-between;
                align-items: last baseline;

                .news-content {
                    width: 100%;
                    font-family: Roboto;
                    font-weight: 100;
                    font-style: normal;
                    font-size: 22px;
                    line-height: 40px;

                    .news-text {
                        font-size: 20px;
                        color: #551A8B;
                    }
                }

                .news-button {
                    font-size: 22px;
                }
            }
        }
    }

    a {
        text-decoration: none;
    }

    .el-carousel__item {
        background-color: #F5F5F5;
    }


    .research {
        margin-bottom: 20px;
        width: 100%;

        .research-item {
            width: 100%;

            .research-item-cotent {
                width: 100%;
                display: -webkit-flex;
                display: flex;
                justify-content: center;
                
                img {
                    width: 30%;
                    // height: fit-content;
                    object-fit: contain;
                    margin-right: 10px;
                    margin-top: 20px;
                }

                p {
                    font-family: Arial, sans-serif;
                    font-size: 20px;
                    line-height: 1.5;
                }
            }
        }
    }


    @media screen and (max-width: 768px) {
        .banner {
            padding: 15px;
        }

        .banner p {
            // font-weight: 100;
            font-size: 17px;
            line-height: 1.5;
        }

        .research {
            margin-bottom: 20px;
            width: 100%;
            display: block;

            .research-item-cotent {
                display: block !important; 
                width: 100%;

                img {
                    width: 100% !important;
                }

                p {
                    font-family: Roboto;
                    font-size: 17px;
                    line-height: 1.5;
                }
            }
        }

        .news-text {
            font-size: 15px;
        }
    }
</style>